<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%--
  Created by IntelliJ IDEA.
  User: 联想
  Date: 2020/3/27
  Time: 21:26
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>jQuery按钮控制时间轴滚动</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/timeLine/css/public.css">

    <script src="${pageContext.request.contextPath}/static/timeLine/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/timeLine/js/jquery_flexslider.js"></script>

</head>
<body>
<div class="about-history" id="fzlc">
    <header class="about-title title-white">
        <h3 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">时间轴</h3>
        <p class="wow fadeInUp" data-wow-delay=".2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">HISTORY</p>
    </header>
    <div class="about-history-list wow zoomIn" data-wow-delay=".4s" style="visibility: visible; animation-delay: 0.4s; animation-name: zoomIn;">
        <div class="flex-viewport" style="overflow: hidden; position: relative;">
            <ul class="slides clearfix list" style="width: 2600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">


                <c:forEach var="announcement" items="${list}">
                    <li style="width: 253px; float: left; display: block;">
                        <div class="item">

                            <a href="${pageContext.request.contextPath}/admin/toUserFeedBack?adminName=${announcement.adminName}
                &adminNotice=${announcement.adminNotice}">
                            <h3>${announcement.noticeTime}</h3>
                            </a>

                            <div class="desc">
                                <p>${announcement.adminName}=>${announcement.adminNotice}</p>
                            </div>
                        </div>
                    </li>
                </c:forEach>

                <li style="width: 253px; float: left; display: block;"></li>
            </ul>
        </div>
        <ul class="flex-direction-nav">
            <li class="flex-nav-prev"><a class="flex-prev" href="#">&lt;</a></li>
            <li class="flex-nav-next"><a class="flex-next" href="#">&gt;</a></li>
        </ul>
    </div>
</div>

<script>
    $(function(){
        if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
            //phone
        }else{
            //PC
            $(".about-history-list").flexslider({animation:"slide",slideshow:false,controlNav:false,itemWidth:253,itemMargin:31,prevText:"<",nextText:">",move:1});
        }
    });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>